<template>
  <div class="component component--module most-popular">
    <div class="container container--zone full-width background--light no-margin">
      <div class="region region--full">
        <div class="component component--module most-popular no-margin testing123">
          <div class="header header--primary">
            <h2 class="title">
              <span class="label">MOST POPULAR</span>
            </h2>
          </div>
          <div class="column column--full">
            <div class="group group--articles">
              <onePicText :botfullData="popularData"></onePicText>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import onePicText from "../../../components/onePicText/onePicText.vue";
import homeRequest from "@/api/home.js";
const popularData = ref([])
onMounted(() => {
  getPopularList()
})
// 获取最受欢迎的数据
const getPopularList = () => {
  let data = {
    current:1,
    key: 'popular',  //当前页面
    size:10,
    isimg:"1",
  }
  homeRequest.newsData(data).then((res) => {
    if (res.data.length > 16) {
      popularData.value = res.data.records.slice(0, 16)
    } else {
      popularData.value = res.data.records.slice(0, res.data.length)
    }
    popularData.value.forEach((item) => {
      item.secondary = []
    })
    window.sessionStorage.setItem('popularData', JSON.stringify(popularData.value));
  })
}
</script>
<style lang="scss" scoped>
.most-popular .element--article:hover .content--primary {
  top: -30px;
}
</style>
